<template>
  <div style="height: 100%">
    <div class="loading" v-if="loading">
      <div class="radar-spinner">
        <div class="circle">
          <div class="circle-inner-container">
            <div class="circle-inner"></div>
          </div>
        </div>

        <div class="circle">
          <div class="circle-inner-container">
            <div class="circle-inner"></div>
          </div>
        </div>

        <div class="circle">
          <div class="circle-inner-container">
            <div class="circle-inner"></div>
          </div>
        </div>

        <div class="circle">
          <div class="circle-inner-container">
            <div class="circle-inner"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="container" v-else>
      <header class="header_title">企业单位信息公示</header>
      <header class="header">
        
        <div class="title">{{ data.unitName }}</div>
        <div class="height-10"></div>
        <div style="font-size: 14px">{{ data.address }}</div>
        <div class="height-10"></div>
        <!-- <template v-if="data.keyUnIt">
          <van-tag type="warning" size="mini" style="margin-right: 10px"
            >重点单位</van-tag
          >
          <van-tag type="warning" size="medium" style="margin-right: 10px">{{
            data.typeA
          }}</van-tag>
        </template> -->

        <!-- <van-tag
          type="warning"
          size="medium"
          v-if="data.label"
          style="margin-right: 10px"
          >{{ data.label }}</van-tag
        > -->
    <div class="tag">
      <van-tag
          type="warning"
          size="medium"
           style="margin-left:35px"
          v-if="data.likeWhiteList == 1"
          >点赞数 {{ likeData.likeIndex }}</van-tag
        >
          <van-tag
          type="warning"
          size="medium"
          style="margin-left: 10px"
          v-if="$route.query.consumptionIndex"
          >人气指数 {{ $route.query.consumptionIndex }}</van-tag
        >
        

        <div class="dian" @click="dianZan" v-if="data.likeWhiteList == 1">
          <van-image
            width="25"
            height="25"
            :src="
              likeData.isLikeIndex == 1
                ? require('@/assets/images/dianzan.png')
                : require('@/assets/images/dianzan1.png')
            "
          />
          <!-- <div> {{likeData.isLikeIndex == 1?'已点赞':'为它点赞'}}</div> -->
        </div>
    </div>
        <!-- <van-tag type="warning" size="medium" style="margin-right: 10px" v-if="data.isLikeIndex==1">已点赞</van-tag>
        <van-tag type="warning" size="medium" style="margin-right: 10px" v-else>为它点赞</van-tag> -->
          <div class="height-10"></div>
        <div class="height-10"></div>
        <div style="text-align: center; font-size: 18px; font-weight: 700" v-if="listA.indexScore">
          {{this.$moment().add(-1, 'd').format('YYYY年MM月DD日') }}精准画像<span
            v-if="listA.indexScore > 79"
            style="color: #a2db57"
            >{{ listA.indexScore }}</span
          >
          <span v-else-if="listA.indexScore > 59" style="color: #ffd700">{{
            listA.indexScore
          }}</span>
          <span v-else style="color: #ff0000">{{ listA.indexScore }}</span
          >分
        </div>
        <div id="main" style="width: 375px; height: 260px"  v-show="listA.indexScore"></div>
        <div class="list" v-if="listB.length">
          <div class="title">精准画像分析</div>




           <template v-for="(item,index) in listB" >
            <div :key="index">
                <van-divider
            :style="{ color: '#1890ff', borderColor: '#1890ff', margin: 0 }"
          >
            <div class="title_son">{{item.largeCategory}}</div></van-divider
          >
          <div class="height-10"></div>
          <div class="padding_lfet">
            扣分类别:  {{item.categoryStr }}
          </div>
          <div class="height-10"></div>
          <div class="padding_lfet">
            扣分明细:{{item.reasonReason }}
          </div>
          <div class="height-10"></div>
            </div>
           </template>









          <!-- <div class="height-10"></div> -->

          <!-- <van-divider
            :style="{ color: '#1890ff', borderColor: '#1890ff', margin: 0 }"
          >
            <div class="title_son">主体责任</div></van-divider
          >
          <div class="height-10"></div>
          <div class="padding_lfet">
            截止日期:  {{this.$moment().add(-1, 'd').format('YYYY年MM月DD日') }}
          </div>
          <div class="height-10"></div>
          <div class="padding_lfet">
            完成情况:{{ data.ztzrScore }}；{{ data.reasonReason }}
          </div>
          <div class="height-10"></div>

          <van-divider
            :style="{ color: '#1890ff', borderColor: '#1890ff', margin: 0 }"
          >
            <div class="title_son">日常监督</div></van-divider
          >
          <div class="height-10"></div>
          <div class="padding_lfet">
            检查日期:{{ data.rcjgCheckDateTime || "--" }}
          </div>
          <div class="height-10"></div>
          <div class="padding_lfet">
            检查部门:{{ data.rcjgUnitName || "--" }}
          </div>
          <div class="height-10"></div>
          <div class="padding_lfet">
            检查结果:{{ data.checkResultDeals || "--" }}
          </div>
          <div class="height-10"></div>
          <van-divider
            :style="{ color: '#1890ff', borderColor: '#1890ff', margin: 0 }"
          >
            <div class="title_son">食品抽检</div></van-divider
          >
          <div class="height-10"></div>

          <div class="padding_lfet">
            采样日期:{{ data.fSampleDate || "--" }}
          </div>
          <div class="height-10"></div>
          <div class="padding_lfet">
            委托部门:{{ data.fTaskSource || "--" }}
          </div>
          <div class="height-10"></div>
          <div class="padding_lfet">
            抽检机构:{{ data.fDetectionOrg || "--" }}
          </div>
          <div class="height-10"></div>
          <div class="padding_lfet">
            抽检品种:{{
              data.foodSamplingStr.replace("最近一次食品抽检品种有", "") || "--"
            }}
          </div>
          <div class="height-10"></div>
          <div class="padding_lfet">检查项目:{{ data.fTestItem || "--" }}</div>
          <div class="height-10"></div>
          <van-divider
            :style="{ color: '#1890ff', borderColor: '#1890ff', margin: 0 }"
          >
            <div class="title_son">安全事故</div></van-divider
          >
          <div class="height-10"></div>
          <div class="padding_lfet">事故日期:无</div>
          <div class="height-10"></div>
          <div class="padding_lfet">事故情况:{{ data.safetyAccident }}</div>
          <div class="height-10"></div>
          <van-divider
            :style="{ color: '#1890ff', borderColor: '#1890ff', margin: 0 }"
          >
            <div class="title_son">投诉举报</div></van-divider
          >
          <div class="height-10"></div>
          <div class="padding_lfet">投诉日期:{{data.complaintsTime}}</div>
          <div class="height-10"></div>
          <div class="padding_lfet">投诉情况:{{ data.complaintsReport }}</div> -->
        </div>
      </header>
      <section class="section">
        <!--
        -->
        <!-- <van-tabs animated sticky v-if="false">
          <van-tab v-if="data.label">
            <template #title>
              <div class="nav_item">
                <div
                  style="
                    display: flex;
                    justify-content: center;
                    align-content: center;
                    margin-bottom: 10px;
                  "
                >
                  <van-image
                    width="40"
                    height="40"
                         :src="require('@/assets/images/a.png')"
                  />
                </div>
                <div style="font-size: 16px">责任签署</div>
              </div>
            </template>
              <div class="height-10"></div>
              <div
                class="title"
                style="padding-left: 5px; border-left: 5px solid #1890ff"
              >
                食品安全总监
              </div>
              <div class="height-10"></div>
              <div class="responsibility">
                <div class="left">
                  <van-image
                    width="100%"
                    src="https://spaq.suzhou.gov.cn/ssa_zwtx.png"
                    height="50px"
                    fit="cover"
                  />
                </div>
                <div class="right">
                  <div class="title">企业主要负责人</div>
                  <div v-if="data.personChargePeopleTheName">
                    {{ data.personChargePeopleTheName }}
                    <span class="green">已签署食品安全任命书</span>
                  </div>
                  <div v-else class="red">未签署</div>
                </div>
              </div>
              <div class="height-10"></div>
              <div class="responsibility">
                <div class="left">
                  <van-image
                    width="100%"
                    src="https://spaq.suzhou.gov.cn/ssa_zwtx.png"
                    height="50px"
                    fit="cover"
                  />
                </div>
                <div class="right">
                  <div class="title">食品安全总监</div>
                  <div v-if="data.chiefInspectorTheName">
                    {{ data.chiefInspectorTheName }}
                    <span class="green">已签署食品安全任命书</span>
                  </div>
                  <div v-else class="red">未签署</div>
                </div>
              </div>
          </van-tab>
          <van-tab>
            <template #title>
              <div class="nav_item">
                <div
                  style="
                    display: flex;
                    justify-content: center;
                    align-content: center;
                    margin-bottom: 10px;
                  "
                >
                  <van-image
                    width="40"
                    height="40"
                         :src="require('@/assets/images/b.png')"
                  />
                </div>
                <div style="font-size: 16px">从业人员</div>
              </div>
            </template>
            <div class="height-10"></div>
            <div
              class="title"
              style="padding-left: 5px; border-left: 5px solid #1890ff"
            >
              食品安全员
            </div>
            <div class="height-10"></div>
            <div
              class="item"
              v-for="(item, index) in data.practitionersList.filter(
                (x) => x.isAdmin != 0
              )"
              :key="index"
            >
              <van-row type="flex" justify="space-between">
                <van-col span="8" class="fontSize">
                  姓名:{{ item.theName }}
                </van-col>
                <van-col span="8" style="text-align: right">
                  <van-tag
                    plain
                    type="success"
                    v-if="item.tpiReplyResult == '1'"
                    >通过食安考试</van-tag
                  >
                  <van-tag plain type="danger" v-else>未通过食安考试</van-tag>
                </van-col>
              </van-row>
              <div class="height-10"></div>

              <van-row>
                <van-col span="8" class="fontSize">
                  性别:{{ item.sex }}
                </van-col>
                <van-col span="8" class="fontSize">年龄:{{ item.age }}</van-col>
              </van-row>
              <div class="height-10"></div>

              <van-row>
                <van-col span="24" class="fontSize">
                  身份证:{{ item.dabh }}
                </van-col>
              </van-row>
              <div class="height-10"></div>
              <van-row>
                <van-col span="24" class="fontSize">
                  健康证发证机构:{{ item.institutions || "--" }}
                </van-col>
              </van-row>
              <div class="height-10"></div>

              <van-row>
                <van-col span="24" class="fontSize"> 健康证明照片: </van-col>
                <van-col span="24">
                  <van-image
                    v-if="item.theImgUrlStr"
                    style="margin-top: 10px"
                    width="100%"
                    :src="item.theImgUrlStr"
                    height="200px"
                    fit="cover"
                    @click="Preview(item.theImgUrlStr)"
                  >
                    <template v-slot:error>暂无图片</template>
                  </van-image>
                  <van-image
                    v-else
                    style="margin-top: 10px"
                    width="100%"
                    :src="item.theImgUrlStr"
                    height="200px"
                    fit="cover"
                  >
                    <template v-slot:error>暂无图片</template>
                  </van-image>
                </van-col>
              </van-row>
              <div class="height-10"></div>

              <van-row>
                <van-col span="24" class="fontSize">
                  健康证明有效期至:{{ item.validityCate || "--" }}
                </van-col>
              </van-row>
            </div>

            <div class="height-10"></div>
            <div
              style="text-align: center"
              v-if="
                data.practitionersList.filter((x) => x.isAdmin != 0).length == 0
              "
            >
              暂无人员信息
            </div>
            <div class="height-10"></div>

            <div
              class="title"
              style="padding-left: 5px; border-left: 5px solid #1890ff"
            >
              从业人员信息
            </div>
            <div class="height-10"></div>
            <div
              class="item"
              v-for="(item, index) in data.practitionersList.filter(
                (x) => x.isAdmin == 0
              )"
              :key="index"
            >
              <van-row type="flex" justify="space-between">
                <van-col span="8" class="fontSize">
                  姓名:{{ item.theName }}
                </van-col>
                <van-col span="8" style="text-align: right">
                  <van-tag
                    plain
                    type="success"
                    v-if="item.tpiReplyResult == '1'"
                    >通过食安考试</van-tag
                  >
                  <van-tag plain type="danger" v-else>未通过食安考试</van-tag>
                </van-col>
              </van-row>
              <div class="height-10"></div>

              <van-row>
                <van-col span="8" class="fontSize">
                  性别:{{ item.sex }}
                </van-col>
                <van-col span="8" class="fontSize">年龄:{{ item.age }}</van-col>
              </van-row>
              <div class="height-10"></div>

              <van-row>
                <van-col span="24" class="fontSize">
                  身份证:{{ item.dabh }}
                </van-col>
              </van-row>
              <div class="height-10"></div>
              <van-row>
                <van-col span="24" class="fontSize">
                  健康证发证机构:{{ item.institutions || "--" }}
                </van-col>
              </van-row>
              <div class="height-10"></div>

              <van-row>
                <van-col span="24" class="fontSize"> 健康证明照片: </van-col>
                <van-col span="24">
                  <van-image
                    v-if="item.theImgUrlStr"
                    style="margin-top: 10px"
                    width="100%"
                    :src="item.theImgUrlStr"
                    height="200px"
                    fit="cover"
                    @click="Preview(item.theImgUrlStr)"
                  >
                    <template v-slot:error>暂无图片</template>
                  </van-image>
                  <van-image
                    v-else
                    style="margin-top: 10px"
                    width="100%"
                    :src="item.theImgUrlStr"
                    height="200px"
                    fit="cover"
                  >
                    <template v-slot:error>暂无图片</template>
                  </van-image>
                </van-col>
              </van-row>
              <div class="height-10"></div>

              <van-row>
                <van-col span="24" class="fontSize">
                  健康证明有效期至:{{ item.validityCate || "--" }}
                </van-col>
              </van-row>
            </div>
            <div class="height-10"></div>
            <div
              style="text-align: center"
              v-if="
                data.practitionersList.filter((x) => x.isAdmin == 0).length == 0
              "
            >
              暂无人员信息
            </div>
            <div class="height-10"></div>
          </van-tab>
          <van-tab>
            <template #title>
              <div class="nav_item">
                <div
                  style="
                    display: flex;
                    justify-content: center;
                    align-content: center;
                    margin-bottom: 10px;
                  "
                >
                  <van-image
                    width="40"
                    height="40"
                    :src="require('@/assets/images/c.png')"
                  />
                </div>
                <div style="font-size: 16px">索证索票</div>
              </div>
            </template>
            <div class="height-10"></div>
            <div class="list_date">
              <div
                v-for="(item, index) in date"
                :key="index"
                class="items"
                @click="switchs(item)"
              >
                <div
                  style="padding: 0 20px; white-space: pre"
                  :class="[item == query.dateCompletion ? 'active' : '']"
                >
                  {{ item }}
                </div>
                <div class="height-10"></div>
                <div class="line">
                  <div class="line1"></div>
                  <div
                    class="line2"
                    :class="[item == query.dateCompletion ? 'actives' : '']"
                  ></div>
                  <div class="line1"></div>
                </div>
              </div>
            </div>
            <div class="height-10"></div>
            <div
              v-for="item in list"
              :key="item.id"
              style="
                background: white;
                padding: 10px;
                border-radius: 10px;
                margin-bottom: 10px;
              "
            >
              <van-row>
                <van-col span="12">采购日期:{{ item.purchaseTimeStr }}</van-col>
                <van-col span="12">
                  票据类型:
                  <span v-if="item.billType == '统一实名票据'" class="green">
                    {{ item.billType }}
                  </span>
                  <span v-else class="red">{{ item.billType }}</span>
                </van-col>
              </van-row>
              <div class="height-10"></div>

              <van-row>
                <van-col span="12"
                  >品种名称:{{ item.salesSubitemName }}</van-col
                >
                <van-col span="12">
                  采购数量: {{ item.purchaseWeight }}{{ item.company }}</van-col
                >
              </van-row>
              <div class="height-10"></div>
              <van-row>
                <van-col span="24">供应商:{{ item.scunitName }}</van-col>
              </van-row>
              <div class="height-10"></div>
              <van-row>
                <van-col span="12"
                  >合格证明:{{
                    item.categoryVoucherCount > 0 ? "有" : "无"
                  }}</van-col
                >
                <van-col span="12"
                 v-if="item.bodyIndustryRemarks=='幼托机构食堂'||item.bodyIndustryRemarks=='学校食堂'"
                  >核磅查验:{{
                    item.nuclearPoundCount > 0 ? "已核磅" : "未核磅"
                  }}</van-col
                >
              </van-row>
            </div>
               <div
              style="text-align: center"
              v-if="!list.length"
            >
              暂无索证索票记录
            </div>
                 <div class="height-10"></div>
          </van-tab>
          <van-tab>
               <template #title>
              <div class="nav_item">
                <div
                  style="
                    display: flex;
                    justify-content: center;
                    align-content: center;
                    margin-bottom: 10px;
                  "
                >
                  <van-image
                    width="40"
                    height="40"
                    :src="require('@/assets/images/d.png')"
                  />
                </div>
                <div style="font-size: 16px">食安快检</div>
              </div>
            </template>
                 <div class="height-10"></div>
            <div class="list_date">
              <div
                v-for="(item, index) in date"
                :key="index"
                class="items"
                @click="switchsss(item)"
              >
                <div
                  style="padding: 0 20px; white-space: pre"
                  :class="[item == query.purchasetime ? 'active' : '']"
                >
                  {{ item }}
                </div>
                <div class="height-10"></div>
                <div class="line">
                  <div class="line1"></div>
                  <div
                    class="line2"
                    :class="[item == query.purchasetime ? 'actives' : '']"
                  ></div>
                  <div class="line1"></div>
                </div>
              </div>
            </div>
            <div class="height-10"></div>

                    <div
              v-for="item in quickInspectionList"
              :key="item.id"
              style="
                background: white;
                padding: 10px;
                border-radius: 10px;
                margin-bottom: 10px;
              "
            >
              <van-row>
                <van-col span="12"
                  >检测日期:{{ item.quickCheckDateStr }}</van-col
                >
                <van-col span="12" >
               
                检测结果:  <span class="green">
                  阴性(未检出)
                 
                </span>
                 
                 
                 </van-col
                >
              </van-row>
              <div class="height-10"></div>

              <van-row>
                <van-col span="12">检测项目:{{ item.quickCheckItemName }}</van-col>
                <van-col span="12">检测品种:{{ item.salesSubitemName }}</van-col>
                
              </van-row>
            
              <div class="height-10"></div>
              <van-row>
                <van-col span="24">检测机构:{{ item.unitName }}</van-col>
              </van-row>
              <div class="height-10"></div>
            </div>

      <div
              style="text-align: center"
              v-if="!quickInspectionList.length"
            >
              暂无食安快检记录
            </div>
                 <div class="height-10"></div>
          </van-tab>
        </van-tabs> -->

        <div class="box">
          <template v-if="data.label">
            <div class="height-10"></div>

            <div
              class="title"
              style="padding-left: 5px; border-left: 5px solid #1890ff"
            >
              食安签署
            </div>
            <div class="height-10"></div>
            <div class="responsibility">
              <div class="left">
                <van-image
                  width="100%"
                  src="https://spaq.suzhou.gov.cn/ssa_zwtx.png"
                  height="50px"
                  fit="cover"
                />
              </div>
              <div class="right">
                <div class="title">企业主要负责人</div>
                <div v-if="data.personChargePeopleTheName">
                  {{ data.personChargePeopleTheName }}
                  <span class="green">已签署食品安全任命书</span>
                </div>
                <div v-else class="red">未签署</div>
              </div>
            </div>
            <div class="height-10"></div>
            <div class="responsibility">
              <div class="left">
                <van-image
                  width="100%"
                  src="https://spaq.suzhou.gov.cn/ssa_zwtx.png"
                  height="50px"
                  fit="cover"
                />
              </div>
              <div class="right">
                <div class="title">食品安全总监</div>
                <div v-if="data.chiefInspectorTheName">
                  {{ data.chiefInspectorTheName }}
                  <span class="green">已签署食品安全任命书</span>
                </div>
                <div v-else class="red">未签署</div>
              </div>
            </div>
          </template>
          <div class="height-10"></div>
          <div
            class="title"
            style="padding-left: 5px; border-left: 5px solid #1890ff"
          >
            食品安全员
          </div>
          <div class="height-10"></div>
          <div
            class="item"
            v-for="(item, index) in data.practitionersList.filter(
              (x) => x.isAdmin != 0
            )"
            :key="index"
          >
            <van-row type="flex" justify="space-between">
              <van-col span="8" class="fontSize">
                姓名:{{ item.theName }}
              </van-col>
              <van-col span="8" style="text-align: right">
                <van-tag plain type="success" v-if="item.tpiReplyResult == '1'"
                  >通过食安考试</van-tag
                >
                <van-tag plain type="danger" v-else>未通过食安考试</van-tag>
              </van-col>
            </van-row>
            <div class="height-10"></div>

            <van-row>
              <van-col span="8" class="fontSize"> 性别:{{ item.sex }} </van-col>
              <van-col span="8" class="fontSize">年龄:{{ item.age }}</van-col>
            </van-row>
            <div class="height-10"></div>

            <van-row>
              <van-col span="24" class="fontSize">
                身份证:{{ item.dabh }}
              </van-col>
            </van-row>
            <div class="height-10"></div>
            <van-row>
              <van-col span="24" class="fontSize">
                健康证发证机构:{{ item.institutions || "--" }}
              </van-col>
            </van-row>
            <div class="height-10"></div>

            <van-row>
              <van-col span="24" class="fontSize"> 健康证明照片: </van-col>
              <van-col span="24">
                <van-image
                  v-if="item.theImgUrlStr"
                  style="margin-top: 10px"
                  width="100%"
                  :src="item.theImgUrlStr"
                  height="200px"
                  fit="cover"
                  @click="Preview(item.theImgUrlStr)"
                >
                  <template v-slot:error>暂无图片</template>
                </van-image>
                <van-image
                  v-else
                  style="margin-top: 10px"
                  width="100%"
                  :src="item.theImgUrlStr"
                  height="200px"
                  fit="cover"
                >
                  <template v-slot:error>暂无图片</template>
                </van-image>
              </van-col>
            </van-row>
            <div class="height-10"></div>

            <van-row>
              <van-col span="24" class="fontSize">
                健康证明有效期至:{{ item.validityCate || "--" }}
              </van-col>
            </van-row>
          </div>

          <div class="height-10"></div>
          <div
            style="text-align: center"
            v-if="
              data.practitionersList.filter((x) => x.isAdmin != 0).length == 0
            "
          >
            暂无人员信息
          </div>
          <div class="height-10"></div>

          <div
            class="title"
            style="padding-left: 5px; border-left: 5px solid #1890ff"
          >
            从业人员信息
          </div>
          <div class="height-10"></div>
          <div
            class="item"
            v-for="(item, index) in data.practitionersList.filter(
              (x) => x.isAdmin == 0
            )"
            :key="index"
          >
            <van-row type="flex" justify="space-between">
              <van-col span="8" class="fontSize">
                姓名:{{ item.theName }}
              </van-col>
              <van-col span="8" style="text-align: right">
                <van-tag plain type="success" v-if="item.tpiReplyResult == '1'"
                  >通过食安考试</van-tag
                >
                <van-tag plain type="danger" v-else>未通过食安考试</van-tag>
              </van-col>
            </van-row>
            <div class="height-10"></div>

            <van-row>
              <van-col span="8" class="fontSize"> 性别:{{ item.sex }} </van-col>
              <van-col span="8" class="fontSize">年龄:{{ item.age }}</van-col>
            </van-row>
            <div class="height-10"></div>

            <van-row>
              <van-col span="24" class="fontSize">
                身份证:{{ item.dabh }}
              </van-col>
            </van-row>
            <div class="height-10"></div>
            <van-row>
              <van-col span="24" class="fontSize">
                健康证发证机构:{{ item.institutions || "--" }}
              </van-col>
            </van-row>
            <div class="height-10"></div>

            <van-row>
              <van-col span="24" class="fontSize"> 健康证明照片: </van-col>
              <van-col span="24">
                <van-image
                  v-if="item.theImgUrlStr"
                  style="margin-top: 10px"
                  width="100%"
                  :src="item.theImgUrlStr"
                  height="200px"
                  fit="cover"
                  @click="Preview(item.theImgUrlStr)"
                >
                  <template v-slot:error>暂无图片</template>
                </van-image>
                <van-image
                  v-else
                  style="margin-top: 10px"
                  width="100%"
                  :src="item.theImgUrlStr"
                  height="200px"
                  fit="cover"
                >
                  <template v-slot:error>暂无图片</template>
                </van-image>
              </van-col>
            </van-row>
            <div class="height-10"></div>

            <van-row>
              <van-col span="24" class="fontSize">
                健康证明有效期至:{{ item.validityCate || "--" }}
              </van-col>
            </van-row>
          </div>
          <div class="height-10"></div>
          <div
            style="text-align: center"
            v-if="
              data.practitionersList.filter((x) => x.isAdmin == 0).length == 0
            "
          >
            暂无人员信息
          </div>
        </div>

        <div class="height-10"></div>

        <div class="box" v-if="data.rcjgUnitName">
          <div
            class="title"
            style="padding-left: 5px; border-left: 5px solid #1890ff"
          >
            最新一次日常监督检查情况
          </div>
          <div class="height-10"></div>
          <div class="item" @click="inspect">
            <van-row type="flex" justify="space-between">
              <van-col span="12" class="fontSize">
                检查日期:{{ data.rcjgCheckDateTime }}
              </van-col>
            </van-row>
            <div class="height-10"></div>

             <van-row type="flex" justify="space-between">
              <van-col span="24" class="fontSize">
                检查结果:{{ data.checkResultDeals }}
              </van-col>
              <!-- <van-col span="8" >
                121212
                </van-col> -->
            </van-row>
            <div class="height-10"></div>

            <van-row type="flex" justify="space-between">
              <van-col span="24" class="fontSize">
                检查部门:{{ data.rcjgUnitName }}
              </van-col>
              <!-- <van-col span="8" >
                121212
                </van-col> -->
            </van-row>

            <div class="height-10"></div>
          </div>
        </div>
        <div class="height-10"></div>
        <div class="height-10"></div>

        <!-- @ApiModelProperty(value="日常监督(检查时间)")
    private String rcjgCheckDateTime;

    @ApiModelProperty(value="日常监督(检查结果)")
    private String checkResult;

    @ApiModelProperty(value="日常监督(检查部门)")
    private String rcjgUnitName;

    @ApiModelProperty(value="日常监督(检查编号)")
    private String checkForMno;


    @ApiModelProperty(value="日常监督(检查单位名称)")
    private String checkUnitName; -->
      </section>

      <footer class="footer">苏州市市场监督管理局监</footer>
    </div>
  </div>
</template>
<script>
import { timestamp } from "@/utils/token";
import axios from "axios";
import { ImagePreview } from "vant";
import * as echarts from "echarts";

export default {
  data() {
    return {
      data: {},
      loading: true,
      date: [],
      query: {
        dateCompletion: this.$moment().format("MM-DD"),
        pageIndex: 1,
        pageSize: 100,
        unitId: this.$route.query.id,
        purchasetime: this.$moment().format("MM-DD"),
      },
      list: [],
      listA: {},
      listB: [],
      quickInspectionList: [],
      listData: {},
      likeData: {
        isLikeIndex: 1,
        likeIndex: "0",
      },
      isDianZan: false,
    };
  },
  created() {
    for (let index = 0; index < 30; index++) {
      this.date.push(this.$moment().subtract(index, "days").format("MM-DD"));
    }
  },
  computed: {},
  mounted() {
    this.quaryCompanyMainPageInfo();
    // this.getList();
  },
  methods: {
    inspect() {
      this.$router.push(
        `/inspect?checkForMno=${this.data.checkForMno}&checkUnitName=${this.data.checkUnitName}`
      );
    },
    quaryCompanyMainPageInfo() {
      axios
        .get(
          "https://spaq.suzhou.gov.cn/ssa-api/ssa/claim/map/claimMapScanningCode",
          {
            params: {
              id: this.$route.query.id,
              purchasetime:
                this.$moment().format("YYYY") + "-" + this.query.purchasetime,
            },
            headers: {
              timestamp: timestamp(),
            },
          }
        )
        .then((res) => {
          if (res.data.code == 200) {
            this.data = res.data.data;
       
            this.findLikeInformation();
            this.getList(this.data.newLicenseNo)
            // setTimeout(() => {
            //   this.radar();
            // });
          } else {
            this.$toast(res.data.msg);
          }
        });

      // axios
      //   .get(
      //     "https://spaq.suzhou.gov.cn/ssa-api/ssa/claim/map/findQuickInspection",
      //     {
      //       params: {
      //         ...this.query,
      //         id: this.$route.query.id,
      //         purchasetime:
      //           this.$moment().format("YYYY") + "-" + this.query.purchasetime,
      //       },
      //     }
      //   )
      //   .then((res) => {
      //     this.quickInspectionList = res.data.data;
      //   });
    },
    getList(newLicenseNo){
 axios
        .post(
          "https://spaq.suzhou.gov.cn/ssa-rcjg-api/supervise/unit/update/findSuperviseUnitUpdate",
         {
endCreateTime: this.$moment().add(-1, 'd').format('YYYY-MM-DD'),
newLicenseNo,
isPage: 1,
page: 1,
pageSize: 1,
startCreateTime: this.$moment().add(-1, 'd').format('YYYY-MM-DD'),
            },
         {
             headers: {
              timestamp: timestamp(),
            },
         }
        )
        .then((res) => {
          if (res.data.code == 200) {

            if(res.data.data.list.length){
              this.listA=res.data.data.list[0]
            setTimeout(() => {
              this.radar();
            });
            this.getAnalysis(this.listA.id)
            }
            
          } else {
            this.$toast(res.data.msg);
          }
               this.loading = false;
        }).catch((e) => {
            this.loading = false;
        })




// /supervise/unit/record/findsuperviseUnitRecordById?id=








    },
        getAnalysis(id){
 axios
        .get(
          "https://spaq.suzhou.gov.cn/ssa-rcjg-api/supervise/unit/record/findsuperviseUnitRecordById",
       {
            params: {
              id:id,
            },
            headers: {
              timestamp: timestamp(),
            },
          }
        )
        .then((res) => {
          if (res.data.code == 200) {
            console.log(res);
            this.listB=res.data.data
            // setTimeout(() => {
            //   this.radar();
            // });
          } else {
            this.$toast(res.data.msg);
          }
        });




// /supervise/unit/record/findsuperviseUnitRecordById?id=








    },
    findLikeInformation() {
      //         axios
      // .get(
      //  "https://spaq.suzhou.gov.cn/test-ssa-api/ssa/claim/map/findLikeInformation",
      //   {
      //     params: {
      //       id: this.$route.query.id,
      //       purchasetime:
      //         this.$moment().format("YYYY") + "-" + this.query.purchasetime,
      //     },
      //     headers: {
      //       timestamp: timestamp(),
      //     },
      //   }
      // )
      // .then((res) => {
      //     this.data = res.data.data;
      // });
      axios
        .post(
          "https://spaq.suzhou.gov.cn/ssa-api/ssa/claim/map/findLikeInformation",
          {
            mobileInformation: this.$Fingerprint2,
            unitId: this.$route.query.id,
          },
          {
            headers: {
              timestamp: timestamp(),
            },
          }
        )
        .then((res) => {
          this.likeData = res.data.data;
        });
    },

    radar() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      myChart.setOption({
        radar: {
          radius: "60%",
          center: ["50%", "55%"],
          shape: "square",
          splitNumber: 6, // 雷达图圈数设置
          // indicator: this.data.fiveDimensionalScore.map((x) => {
          //   return {
          //     name: x.aName + `\n${x.value}分`,
          //     max: x.max,
          //   };
          // }),
          indicator:[
            {
              name:'主体责任'+ `\n${this.listA.fiveDimensionalScore.aScore}分`,
              max: this.listA.fiveDimensionalScore.aTotalScore,
            },
              {
              name:'部门监管'+ `\n${this.listA.fiveDimensionalScore.bScore}分`,
              max: this.listA.fiveDimensionalScore.bTotalScore,
            },
               {
              name:'负面信息'+ `\n${this.listA.fiveDimensionalScore.cScore}分`,
              max: this.listA.fiveDimensionalScore.cTotalScore,
            },
               {
              name:'信用荣誉'+ `\n${this.listA.fiveDimensionalScore.dScore}分`,
              max: this.listA.fiveDimensionalScore.dTotalScore,
            },
               {
              name:'社会监督'+ `\n${this.listA.fiveDimensionalScore.eScore}分`,
              max: this.listA.fiveDimensionalScore.eTotalScore,
            },
          ],
          axisName: {
            color: "#000000",
            fontSize: "14px",
            lineHeight: 20,
          },

          axisLine: {
            // 设置雷达图中间射线的颜色
            show: true,
            lineStyle: {
              width: 1,
              color: "#f3f3f3",
              type: "dotted",
            },
          },
          splitLine: {
            //网格颜色设置
            show: true,
            lineStyle: {
              width: 1,
              color: "#f3f3f3",
            },
          },
          splitArea: {
            //设置图表颜色，show的值为true
            show: true,
            areaStyle: {
              // color:"#c1ddf8", //一般设置方式
              //设置渐变背景色 new echarts.graphic.LinearGradient(a,b,c,d,arr)
              //a ,b,c,d值可为0，1 a:1表示arr中的颜色右到左；c:1 arr中的颜色左到右
              //b:1表示arr中的颜色下到上；d:1表示arr中的颜色上到下
              color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                [
                  { offset: 0, color: "#ffffff" }, // 0% 处的颜色
                  { offset: 1, color: "#1890ff" }, // 100% 处的颜色
                ],
                false
              ),
            },
          },
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value:[

                     this.listA.fiveDimensionalScore.aScore,
            this.listA.fiveDimensionalScore.bScore,
             this.listA.fiveDimensionalScore.cScore,
            this.listA.fiveDimensionalScore.dScore,
            this.listA.fiveDimensionalScore.eScore,
                ],
                name: "Actual Spending",
                lineStyle: {
                  width: 1,
                },
                symbol: "none",
                areaStyle: {
                  color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                    {
                      color: "rgba(255, 145, 124, 0.1)",
                      offset: 0,
                    },
                    {
                      color: "rgba(246,218,255, 0.9)",
                      offset: 1,
                    },
                  ]),
                },
              },
            ],
          },
        ],
      });
    },
    Preview(e) {
      ImagePreview([e]);
    },
    dianZan() {
      if (this.isDianZan) {
        return;
      }
      this.isDianZan = true;
      axios
        .post(
          "https://spaq.suzhou.gov.cn/ssa-api/superviseunit/like/saveUnitLike",
          {
            mobileInformation: this.$Fingerprint2,
            unitId: this.$route.query.id,
          },
          {
            headers: {
              timestamp: timestamp(),
            },
          }
        )
        .then((res) => {
          if (res.data.code == 200) {
            this.findLikeInformation();
          }
          this.$toast(res.data.msg);
          this.isDianZan = false;
        });
    },
    // getList() {
    //   axios
    //     .post(
    //       "https://spaq.suzhou.gov.cn/ssa-api/purchase/bill/findCertificateAndTicketList",
    //       {
    //         ...this.query,
    //         dateCompletion:
    //           this.$moment().format("YYYY") + "-" + this.query.dateCompletion,
    //       }
    //     )
    //     .then((res) => {
    //       this.list = res.data.data.list;
    //     });
    // },
    // switchs(e) {
    //   this.query.dateCompletion = e;
    //   this.getList();
    // },
    //  switchsss(e) {
    //   this.query.purchasetime = e;
    //         axios
    //     .get(
    //       "https://spaq.suzhou.gov.cn/test-ssa-api/ssa/claim/map/findQuickInspection",
    //    {
    //       params: {
    //         ...this.query,
    //        id: this.$route.query.id,
    //         purchasetime:
    //           this.$moment().format("YYYY") + "-" + this.query.purchasetime,
    //       }
    //    }
    //     )
    //     .then((res) => {
    //       console.log(res);
    //       this.quickInspectionList = res.data.data
    //     });

    // },
  },
};
</script>
<style lang="scss" scoped>
// .container {
//   // padding: 10px;
//   .list {
//     .item {
//       display: flex;
//       align-items: center;
//       padding: 5px 0;
//       .title {
//         padding-left: 10px;
//         font-size: 16px;
//       }
//       .iconfont {
//         color: #1890ff;
//         font-size: 22px;
//       }
//       .color {
//         color: #1890ff;
//       }
//     }
//     .fontSize {
//       font-size: 16px;
//     }
//   }
//   .height {
//     height: 10px;
//   }
//   .box_title {
//     border-left: 5px solid #1890ff;
//     padding-left: 10px;
//     font-size: 17px;
//   }
// }
.container {
  --red: #ff0000;
  --green: #8ce039;
  --yellow: #ffd700;
  .red {
    color: var(--red);
  }
  .green {
    color: var(--green);
  }

  .yellow {
    color: var(--yellow);
  }
  font-size: 15px;
  padding-bottom: 20px;
  .header_title {
    background-color: #1890ff;
    color: white;
    text-align: center;
    padding: 10px;
    font-size: 18px;
  }
  .header {
    
    padding: 10px;
    // background-color: #1890ff;
    background: linear-gradient(to bottom, #1890ff, #ffffff);
    color: white;
    .title {
      font-size: 18px;
    }
    .list {
      padding: 10px;
      background-color: #fff;
      color: #000;
      border-radius: 10px;
      .title_son {
        font-size: 16px;
        padding-left: 10px;
      }

      .padding_lfet {
        padding-left: 20px;
      }
    }
    .dian {
      position: absolute;
      left: 0;
      top:-15%;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #d81e06;
      z-index: 1000;
      font-size: 6px;
    }
    .tag{
position: relative;
    }
  }
  .section {
    /deep/ .van-tabs__line {
      background-color: #1890ff;
    }
    // padding: 10px;
    background-color: #f3f3f3;
    .item {
      background-color: #fff;
      margin-bottom: 10px;
      padding: 10px;
      border-radius: 10px;
    }
    .title {
      font-size: 18px;
    }
    .responsibility {
      padding: 10px;
      border-radius: 10px;
      background-color: #fff;
      // .padding_lfet {
      //   padding-left: 20px;
      // }
      display: flex;

      .left {
        width: 50px;
      }
      .right {
        padding-left: 10px;
        right: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }
      .title {
        font-size: 16px;
      }
    }
    /deep/ .van-tabs__wrap {
      height: 70px;
    }
    /deep/ .van-tab__pane {
      padding: 10px;
    }

    .nav_item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .list_date {
      display: flex;
      flex-wrap: nowrap;
      width: 100%;
      overflow: auto;
      .items {
        flex: 2;
        height: 50px;
        // display: flex;
        // align-items: center;
        // justify-content: center;
        .line {
          display: flex;
          align-items: center;
          .line1 {
            flex: 1;
            border-bottom: 1px solid #1890ff;
          }
          .line2 {
            height: 10px;
            width: 10px;
            border-radius: 30px;
            border: 1px solid #1890ff;
          }
        }
        .active {
          color: #1890ff;
        }
        .actives {
          background-color: #1890ff;
        }
      }
    }
  }
  .footer {
    padding: 8px;
    background-color: #1890ff;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    color: white;
    text-align: center;
  }
  .height-10 {
    height: 10px;
  }
  .box {
    padding: 0 10px;
  }
}
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  .radar-spinner,
  .radar-spinner * {
    box-sizing: border-box;
  }

  .radar-spinner {
    height: 60px;
    width: 60px;
    position: relative;
  }

  .radar-spinner .circle {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    animation: radar-spinner-animation 2s infinite;
  }

  .radar-spinner .circle:nth-child(1) {
    padding: calc(60px * 5 * 2 * 0 / 110);
    animation-delay: 300ms;
  }

  .radar-spinner .circle:nth-child(2) {
    padding: calc(60px * 5 * 2 * 1 / 110);
    animation-delay: 300ms;
  }

  .radar-spinner .circle:nth-child(3) {
    padding: calc(60px * 5 * 2 * 2 / 110);
    animation-delay: 300ms;
  }

  .radar-spinner .circle:nth-child(4) {
    padding: calc(60px * 5 * 2 * 3 / 110);
    animation-delay: 0ms;
  }

  .radar-spinner .circle-inner,
  .radar-spinner .circle-inner-container {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    border: calc(60px * 5 / 110) solid transparent;
  }

  .radar-spinner .circle-inner {
    border-left-color: #1890ff;
    border-right-color: #1890ff;
  }

  @keyframes radar-spinner-animation {
    50% {
      transform: rotate(180deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
}
</style>
